{% extends "base.html" %}{% load i18n %}
{% block title %}{% translate "Office computer" %}{% endblock %}
{% block content %}
<div class="page-head"><div>
  <h1>{% translate "Office computer" %}</h1>
  <p>{% translate "An office computer keeps a copy of the CRM in the church office and stays in step with this site every minute. When the internet is down, the team in the office keeps working on it; everything they save comes here by itself when the internet is back." %}</p>
</div></div>

{% if new_code %}
<section class="panel starting-password" style="max-width:640px">
  <h2>{% blocktranslate trimmed with name=new_code.name %}Connection code for {{ name }}{% endblocktranslate %}</h2>
  <p>{% translate "Type or paste it on the office computer when it asks (or on its Sync page). It is shown only now; keep it private, because it gives a copy of all callers." %}</p>
  <dl class="facts">
    <dt>{% translate "Online address" %}</dt><dd><code>{{ address }}</code></dd>
    <dt>{% translate "Connection code" %}</dt><dd><code class="password">{{ new_code.code }}</code></dd>
  </dl>
</section>
{% endif %}

<section class="panel">
  <h2>{% translate "Connected office computers" %}</h2>
  {% if keys %}
  <div class="table-wrap"><table>
    <thead><tr><th>{% translate "Name" %}</th><th>{% translate "Code ends" %}</th><th>{% translate "Made" %}</th><th>{% translate "Last checked in" %}</th><th>{% translate "Records sent here" %}</th><th></th></tr></thead>
    <tbody>{% for key in keys %}<tr>
      <td>{{ key.name }}{% if not key.active %} <span class="pill">{% translate "Disconnected" %}</span>{% endif %}</td>
      <td><code>…{{ key.hint }}</code></td>
      <td class="nowrap">{{ key.made_at|date:"j M Y" }}{% if key.made_by %} · {{ key.made_by.display_name }}{% endif %}</td>
      <td class="nowrap">{% if key.last_seen_at %}{{ key.last_seen_at|date:"j M Y, H:i" }}{% else %}{% translate "Not yet" %}{% endif %}</td>
      <td class="num">{{ key.received }}</td>
      <td>{% if key.active %}<form method="post">{% csrf_token %}<input type="hidden" name="key" value="{{ key.pk }}"><button class="btn btn-small btn-danger" name="action" value="disconnect">{% translate "Disconnect" %}</button></form>{% endif %}</td>
    </tr>{% endfor %}</tbody>
  </table></div>
  {% else %}<p class="empty">{% translate "None yet." %}</p>{% endif %}
</section>

<section class="panel">
  <h2>{% translate "Connect an office computer" %}</h2>
  <ol>
    <li>{% translate "Make a connection code here." %}</li>
    <li>{% translate "On the office computer, unzip the CRM and start it with start-windows.bat --office-computer (Mac or Linux: ./start-mac-linux.sh --office-computer)." %}</li>
    <li>{% translate "Type this site’s address and the code when it asks. It copies the callers and the team (a few minutes), then the team in the office signs in with the same names and passwords as here." %}</li>
  </ol>
  <form method="post" class="form">{% csrf_token %}
    <div class="form-grid">
      <div class="field"><label for="id_name">{% translate "Name" %}</label><input id="id_name" name="name" type="text" maxlength="80" value="{% translate 'Office computer' %}"><div class="help">{% translate "For example: Office computer, Kimara" %}</div></div>
    </div>
    <div class="actions"><button class="btn btn-primary" name="action" value="make">{% translate "Make a connection code" %}</button></div>
  </form>
  <p class="muted small">{% translate "A lost or replaced office computer: press Disconnect, so its code stops working." %}</p>
</section>
{% endblock %}